<template> 
    <div class="second_level_page ticket_administration_page">
        <div class="ticket_administration_box" >
            <div class="ticket_demo" v-for="(ticket,index) in ticketList">
                <div class="ticket_demo_left left">
                    <img src="../../images/ticket_bg.png">
                </div>
                <div class="ticket_demo_right right">
                    <div class="ticket_name">{{ticket.voucherName}}</div>
                    <div class="ticket_member">{{ticket.memberName}}</div>
                    <div class="ticket_amount">久币：{{ticket.jiubiNum}}</div>
                    <div class="ticket_btn" @click.stop="toExchangeCode(ticket.memberId,ticket.voucherCode,ticket.exchangeCode,ticket.exchangeFlag)">兑换验证</div>
                </div>
            </div>
        </div>

        <div v-if="Object.keys(ticketList).length == 0" class="no_data">
            <img src="../../images/no_data.png" alt="">
        </div> 

        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition> 
    </div>
</template>

<script>
    import { getMemberVouvherRecord,getExchangeValidateList } from 'src/service/getData'
    import {mapState,mapMutations} from 'vuex'
   
    export default {
        data (){
            return{
                ticketList:[],
                memberId:null,
            }
        },
        mounted(){
            this.token  = this.userInfo.token;
            this.memberId  = this.userInfo.id;
            this.getExchangeValidateList();
           
        },
        computed:{
             ...mapState([
                'userInfo'
            ]),
        },
        components: {
        },
        methods: {
            voucherType(param,voucherType){
                if(voucherType==1){//提货去
                    let index = param.substring(0,1);
                    if(index == 1){
                        return '全场通用'
                    }else{
                        return '指定仓库'
                    }  
                } else if(voucherType==2) {//门票
                    return '全场通用'
                }
            },
            //我的兑换记录
            async getExchangeValidateList(){
                if (this.userInfo && this.userInfo.id) {
                    let data = await getExchangeValidateList(this.token);
                    this.ticketList = data.data;
                }
            },
            //激活绑定
            async toExchangeCode(memberId,voucherCode,exchengeCode,exchangeFlag){
                this.$router.push({path:'/exchangeCode', query:{memberId:memberId,voucherCode:voucherCode}});
            },
        }
        ,watch: {
            $route(){
                this.getExchangeValidateList();
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import 'src/style/mixin';

    .ticket_administration_box{
        padding: 0;
    }
    .ticket_demo:first-child{
        margin-top: .2rem;
    }
    .ticket_demo:last-child{
        margin-bottom: .2rem;
        border-bottom: 0;
    }
    .ticket_demo{
        @include wh(100%, 2.02rem);
        background: #fff;
        border-bottom: .01rem solid #e3e3e3;
        .ticket_demo_left{
            @include wh(1.92rem, 100%);
            padding: .22rem .18rem 0 .2rem;
            img{
                @include wh(1.54rem, 1.54rem);
            }
        }
        .ticket_demo_right{
            @include wh(5.58rem, 100%);
            position: relative;
            .ticket_name{
                @include sc(.3rem, #333);
                margin-top: .22rem;
                height: .3rem;
                line-height: .3rem;
            }
            .ticket_member{
                @include sc(.28rem, #999);
                margin-top: .25rem;
                height: .28rem;
                line-height: .28rem;
            }
            .ticket_amount{
                @include sc(.28rem, $orange);
                margin-top: .25rem;
                height: .28rem;
                line-height: .28rem;
            }
            .ticket_btn{
                position: absolute;
                bottom: .18rem;
                right: .2rem;
                @include wh(2rem, .8rem);
                background: $orange;
                color: #fff;
                @include sc(.32rem, #fff);
                text-align: center;
                line-height: .8rem;
                border-radius: .1rem;
            }
        }
    }
    .no_data{
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        text-align: center; 
        padding-top: 3.5rem; 
        background: #f4f4f4; 
        z-index: 10;
        img{
            width: 1.88rem;
            height: 2.6rem;
        }
    }
</style>
